<template>
	<div class="ez-input"
		:class="{
			'ez-input--border': border,
			'ez-input--error': validateState
		}"
		:style="{
			...customStyle,
			borderColor: uiBorderColor,
			borderWidth: borderSize
		}"
	>
		<input 
			class="ez-input-form"
			:style="{fontSize}"
			:placeholder="placeholder"
			:disabled="disabled"
			:type="type"
			v-model="modeValue"
			@input="changeValue($event)"
			@focus="onFocus"
			@blur="onBlur"
		/>
		<!-- <div class="ez-input-form-icon">
			<div class="ez-input-form-icon-item" v-if="type == 'password'">
				<i class="ez-icon-iconliulan1"></i>
			</div>
		</div> -->
	</div>
</template>

<script>
	/**
	 * input 输入框
	 * @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
	 * @tutorial http://uviewui.com/components/input.html
	 * @property {String} type 模式选择，见官网说明
	 * @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
	 * @property {} v-model 用于双向绑定输入框的值
	 * @property {String} input-align 输入框文字的对齐方式(默认left)
	 * @property {String} placeholder placeholder显示值(默认 '请输入内容')
	 * @property {Boolean} disabled 是否禁用输入框(默认false)
	 * @property {String Number} maxlength 输入框的最大可输入长度(默认140)
	 * @property {String Number} selection-start 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1）
	 * @property {String Number} maxlength 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1）
	 * @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
	 * @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
	 * @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
	 * @property {Object} custom-style 自定义输入框的样式，对象形式
	 * @property {Boolean} focus 是否自动获得焦点(默认false)
	 * @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true(默认false)
	 * @property {Boolean} password-icon type为password时，是否显示右侧的密码查看图标(默认true)
	 * @property {Boolean} border 是否显示边框(默认false)
	 * @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
	 * @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效(默认true)
	 * @property {String Number} height 高度，单位rpx(text类型时为70，textarea时为100)
	 * @example <u-input v-model="value" :type="type" :border="border" />
	 */
	export default{
		name: "ez-input",
		data() {
			return {
				validateState: false ,// 当前input的验证状态，用于错误时，边框是否改为红色
				uiBorderColor: "",
				modeValue: "",	//绑定到input上的变量
			}
		},
		methods: {
			changeValue(e) {
				this.$emit("change" , this.modeValue);
			},
			onFocus() {
				this.uiBorderColor = this.focusBorderColor;
				this.$emit("onFocus")
			},
			onBlur() {
				this.uiBorderColor = this.borderColor;
				this.$emit("onBlur")
			}
		},
		created() {
			this.uiBorderColor = this.borderColor;
		},
		watch: {
			valueProp: {
				handler() {
					this.modeValue = this.valueProp;
				},
				immediate: true
			}
		},
		model: {
			prop: "valueProp",
			event: "change"
		},
		props: {
			valueProp: {
				type: [String, Number],
				default: ''
			},
			// 输入框的类型，textarea，text，number
			type: {
				type: String,
				default: 'text'
			},
			inputAlign: {
				type: String,
				default: 'left'
			},
			placeholder: {
				type: String,
				default: '请输入内容'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			maxlength: {
				type: [Number, String],
				default: 140
			},
			placeholderStyle: {
				type: String,
				default: 'color: #c0c4cc;'
			},
			confirmType: {
				type: String,
				default: 'done'
			},
			// 输入框的自定义样式
			customStyle: {
				type: Object,
				default() {
					return {};
				}
			},
			// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
			fixed: {
				type: Boolean,
				default: false
			},
			// 是否自动获得焦点
			focus: {
				type: Boolean,
				default: false
			},
			// 密码类型时，是否显示右侧的密码图标
			passwordIcon: {
				type: Boolean,
				default: true
			},
			// input|textarea是否显示边框
			border: {
				type: Boolean,
				default: false
			},
			// 边框尺寸
			borderSize: {
				type: String,
				default: "1px"
			},
			// 输入框的边框颜色
			borderColor: {
				type: String,
				default: '#999999'
			},
			// 输入框聚焦时的边框颜色
			focusBorderColor: {
				type: String,
				default: '#999999'
			},
			autoHeight: {
				type: Boolean,
				default: true
			},
			// type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
			// open-打开，close-关闭
			selectOpen: {
				type: Boolean,
				default: false
			},
			// 高度，单位rpx
			height: {
				type: [Number, String],
				default: ''
			},
			// 字体大小
			fontSize: {
				type: String,
				default: "1.2rem"
			},
			// 是否可清空
			clearable: {
				type: Boolean,
				default: true
			},
			// 指定光标与键盘的距离，单位 px
			cursorSpacing: {
				type: [Number, String],
				default: 0
			},
			// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
			selectionStart: {
				type: [Number, String],
				default: -1
			},
			// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
			selectionEnd: {
				type: [Number, String],
				default: -1
			},
			// 是否自动去除两端的空格
			trim: {
				type: Boolean,
				default: true
			},
			// 是否显示键盘上方带有”完成“按钮那一栏
			showConfirmbar:{
				type:Boolean,
				default:true
			},
		}
	}
</script>

<style lang="less" scoped>
	.ez-input , .ez-input * {
		display: flex;
		flex-flow: row wrap;
	}
	.ez-input{
		padding: 0.5rem;
		width: 100%;
		height: 2rem;
		.ez-input-form{
			flex: 1;
			border: none;
			height: 100%;
			outline: none;
		}
		.ez-input-form-icon{
			.ez-input-form-icon-item{
				
			}
		}
	}
	.ez-input--border{
		border-radius: 0.3rem;
		border: 1px solid #999999;
	}
</style>
